<template lang="html">
  <div class="music_concent">
    <div  class="musicpalyer">
      <img class="backgroundImg" v-bind:src="backgroundSrc" alt="">
      <img class="coverImg" v-bind:src="coverImg" alt="">
      <audio style="display:none" src="">

      </audio>
      <p ></p>
      <span></span>
      <label>·</label>
      <label>{{musicTitle}}</label>
      <label>·</label>
      <label>{{userName}} | </label>
      <label>{{album}}</label>
    </div>
    <div class="music_story_title">
        <p>{{storyTitle}}</p>
        <span>文 / {{storyUserName}}</span>
    </div>
    <div v-html="story" class="music_story">

    </div>

  </div>

</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      datas:'',
      leftSrc:'../../static/img/left.png',
      collect:'../../static/img/collect.png',
      likeSrc:'../../static/img/like.png',
      like1Src:'../../static/img/like1.png',
      like2Src:'../../static/img/like2.png',
      commentsSrc:'../../static/img/comments.png',
      shareSrc:'../../static/img/share.png',
      backgroundSrc:'',
      coverImg:'',
      musicTitle:'',
      userName:'',
      album:'',
      story:'',
      storyTitle:'',
      storyUserName:''

    }
  },
  created(){
    axios.get ("http://v3.wufazhuce.com:8000/api/music/detail/"+this.$route.params.id+"?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android").then((content)=>{
      this.datas = content.data.data.story;
      console.log(content.data.data);
      this.backgroundSrc=content.data.data.feeds_cover
      this.coverImg = content.data.data.cover
      this.musicTitle = content.data.data.title
      this.userName = content.data.data.author.user_name
      this.album = content.data.data.album
      this.story = content.data.data.story
      this.storyTitle =content.data.data.story_title
      this.storyUserName = content.data.data.story_author.user_name

    })
    var imgTag = document.querySelectorAll('img')
    var divTag = document.querySelector('.music_story')
    console.log(imgTag);

    divTag.removeChild(imgTag[0])
    // console.log($('.music_story>img'));
    // $('.music_story>img').remove()
  },
  methods:{
    goback(){
      this.$router.push({
        path:'/allDetials/music'
      })
    }
  }
}
</script>

<style lang="css">
*{
  margin:0;
  padding: 0;
}
.musicpalyer{
  height: 20rem;
  width: 100%;
  /*background:url(backgroundSrc)*/
  background-image:
}
.backgroundImg{
  position: absolute;
  left: 0;
  right:0;
  width: 100%;
  height: 20rem;
  z-index: -1;
}
.coverImg{
  position: absolute;
  width: 30%;
  height: 18%;
  top: 10%;
  right: 35%
}
.musicpalyer p{
  position: absolute;
  left: 45%;
  top: 15%;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
}
.musicpalyer span{
  position: absolute;
  top: 16.5%;
  left: 49%;
  display: inline-block;
  border: 1rem solid transparent;
  border-left:  1rem solid white;
}
.musicpalyer label{
  color:#f3f3f3;
  display: inline-block;
  margin-top: 17rem;
  margin-left: 0.3rem;

}
.music_story_title{
  height: 10rem;
  width: 100%;
  margin-top: 2rem;
}
.music_story_title p{
  width: 94%;
  margin: 0 auto;
  font-size: 2.5rem;
  text-align: left;
}
.music_story_title span{
  display: inline-block;
  width: 94%;
  margin: 0 auto;
  text-align: left;
margin-top: 3rem;
}
.music_story{
  text-align: left;
  line-height: 300%;
}
.music_story p{
  width: 94%;
  margin: 0 auto;


}

</style>
